<template>
  <view class="min-h-screen overflow-hidden bg-white">
    <view class="mt-180rpx w-full col-center">
      <wd-img width="360rpx" mode="widthFix" :src="`${ImgUrl}/puyuanwang/uploud/app/20250228/wMNEJmEPMy.png`" />
      <text class="text-32rpx text-black tracking-2rpx">
        让实体店创业者开店成功率更高
      </text>
    </view>

    <view class="mt-150rpx w-full px-36rpx">
      <wd-input v-model="phone" type="number" size="large" placeholder="请输入手机号" :maxlength="11">
        <template #prefix>
          <view>
            <text class="text-16px">
              +86
            </text>
            <wd-icon
              name="arrow-right"
              color="#C2C2C2" size="12"
            />
          </view>
        </template>
      </wd-input>
      <wd-input v-model="code" type="number" placeholder="请输入验证码" size="large" :maxlength="6">
        <template #suffix>
          <view class="flex items-center">
            <wd-divider vertical />
            <wd-button type="text" size="large" @click="getSmsCode">
              {{ tips }}
            </wd-button>
          </view>
        </template>
      </wd-input>
    </view>

    <view class="mt-36rpx w-full flex items-center px-36rpx">
      <wd-checkbox v-model="isRead" shape="square" style="display: flex;" @change="handleReadChange" />
      <view class="text-28rpx text-gray">
        我已阅读并同意<wd-text
          text="《福源找铺用户协议》"
          type="error"
        />与<wd-text
          text="《福源找铺隐私政策》"
          type="error"
        />
      </view>
    </view>

    <view class="mt-36rpx w-full center px-36rpx">
      <wd-button block type="primary" size="large" :round="false" style="width: 100%;" @click="handleLogin">
        登录
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { HOME_PATH, isTabBarPath, LOGIN_PATH, removeQueryString } from '@/router';
// import { useUserStore } from '@/store';
import { setToken } from '@/utils/auth';

const ImgUrl = import.meta.env.VITE_APP_IMAGE_URL;

// const userStore = useUserStore();

let redirect = HOME_PATH;

/* 同意协议相关 */
const isRead = ref(false);
interface ReadChangeEvent {
  value: boolean;
}

const handleReadChange = (e: ReadChangeEvent): void => {
  console.log('协议是否同意', e);
  isRead.value = e.value;
};

/* 获取验证码相关 */
const canGetCode = ref(false);
const phone = ref('');
const code = ref('');
const tips = ref('获取验证码');
const seconds = ref(60);
const timer = ref<ReturnType<typeof setInterval>>();
const getSmsCode = () => {
  if (!canGetCode.value) return;
  if (!phone.value) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    });
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none',
    });
    return;
  }
  canGetCode.value = false;
  timer.value = setInterval(() => {
    seconds.value--;
    tips.value = `${seconds.value}秒后重新获取`;
    if (seconds.value <= 0) {
      clearInterval(timer.value);
      tips.value = '获取验证码';
      seconds.value = 60;
      canGetCode.value = true;
    }
  }, 1000);
};

/* 登录相关 */
const handleLogin = async () => {
  if (!phone.value) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    });
    return;
  }
  if (!code.value) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    });
    return;
  }
  // 登录请求
  // const res = await userStore.login({ phone: phone.value, code: code.value }).catch(() => {
  //   uni.$u.toast('登录失败');
  // });
  // if (!res) return;
  setToken('1234567890');
  setTimeout(() => {
    if (isTabBarPath(redirect)) {
      uni.switchTab({ url: redirect });
    }
    else {
      uni.redirectTo({ url: redirect });
    }
  }, 800);
};

// 查看协议
// const toAgreement = (type: string) => {
//   uni.navigateTo({
//     url: `/pages/common/webview/index?type=${type}`,
//   });
// };

onLoad((options: any) => {
  if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
    redirect = decodeURIComponent(options.redirect);
  }
});
</script>
